﻿@{
    ViewBag.Title = "DichVuHoTroSanPham";
    Layout = "~/Views/MasterPage/Main.cshtml";
}
@model MvcApplication1.Models.DonDangKyDichVuModel

<div class="left-content">			
	<nav class="subnav">
		<h4>Hỗ trợ</h4>
		<ul>
			<li><a href="javascript:void(0);">Hỗ trợ của tôi</a></li>
			<li><a href="javascript:void(0);">Hướng dẫn sử dụng</a></li>
			<li><a href="javascript:void(0);">Video hướng dẫn và Trợ giúp</a></li>
			<li><a href="javascript:void(0);">Câu hỏi thường gặp</a></li>
			<li><a href="javascript:void(0);">Dịch vụ sửa chữa</a></li>
			<li class="current"><a href="javascript:void(0);" class="selected">Liên hệ với chúng tôi</a></li>
			<li><a href="javascript:void(0);">Thông báo</a></li>
		</ul>
		<div class="contact-phone">
			<p>Gọi cho Trung tâm hỗ trợ khách hàng Anh Hoa</p>
			<p><strong>01669331582</strong></p>
		</div>
	</nav>
</div>

<div class="right-content">
    <h2>Dịch vụ sửa chữa</h2>
	<p>Sản phẩm của bạn ngoài hạn bảo hành? Chúng tôi vẫn có thể trợ giúp để bạn có được lựa chọn tốt nhất.</p>
	<nav class="tab-list">
        @Html.ActionLink("Đặt lịch sửa chữa", "DangKySuaChuaSanPham", null, new { @class = "tab" })
        @Html.ActionLink("Theo dõi tình trạng sửa chữa", "TheoDoiTinhTrangSuaChua", null, new { @class = "active tab" })
        @Html.ActionLink("Thắc mắc & Gỉai đáp", "ThacMacVaGiaiDap", null, new { @class = "tab" })
	</nav>
				
	<h3>KIỂM TRA TÌNH TRẠNG SỬA CHỮA TRỰC TUYẾN</h3>
	<p>
	    <strong>Dưới đây là nhật ký các yêu cầu dịch vụ của bạn</strong>
        <br>
		"Có thể truy vấn lịch sử yêu cầu sửa chữa khi đăng nhập bằng ID thành viên. Lịch sử sửa chữa này cũng có thể được kiểm tra tại Trung tâm Bảo hành. Để kiểm tra chi tiết các yêu cầu dịch vụ click vào nút Xem chi tiết hoặc nhập Số giao nhận. Nếu muốn hủy yêu cầu dịch vụ, hãy liên hệ với Trung tâm Dịch vụ khách hàng.Bạn có thể xem được lịch sử dịch vụ của mình trong vòng 2 năm. Trong trường hợp gặp khó khăn khi truy vấn bạn có thể liên hệ với Trung tâm Dịch vụ  khách hàng để được trợ giúp."
    </p>
    <table class="order-list @ViewBag.EmptyState">
		<caption>Sản phẩm đã đăng kí của tôi</caption>
		<colgroup>
			<col width="12%">
			<col width="12%">
			<col width="12%">
			<col width="*">
			<col width="20%">
			<col width="20%">
		</colgroup>
		<thead>
		    <tr> 
			    <th>Tên sản phẩm</th>
			    <th>Ngày đặt</th>
			    <th>Ngày nhận</th>
			    <th>Tình trạng</th>
                <th>Mô tả</th>
                <th>Phản hồi của KH</th>
                <th></th>
		    </tr>
		</thead>
		<tbody>
        @{
            foreach (var donDangKy in ViewBag.DanhSachDangKy)
            {
                <tr data-id="@donDangKy.id">
                    <td>@donDangKy.tenSanPham</td>
                    <td>@donDangKy.ngayDangKySuaChua</td>
                    <td class="updateDate"></td>
                    <td class="status">@donDangKy.tinhTrang</td>
                    <td>@donDangKy.moTaChiTiet</td>
                    <td>
                    @if (donDangKy.yKienPhanHoi == null)
                    {
                        <a href="javascript:void(0)" data-toggle="modal" data-target="#feedback-popup" class="feedback-button">Phản hồi</a>
                    }
                    else
                    {
                        @donDangKy.yKienPhanHoi
                    }
                    </td>
                </tr>
            }
        }
            <tr class="error-message">
		        <td colspan="7">@ViewBag.DangKySuaChuaEmpty</td>
			</tr>
        </tbody>
	</table>
</div>

<script>
    $('.feedback-button').on('click', function () {
        var self = this;

        $('#feedback-popup').attr('data-id', $(self).parents('tr').attr('data-id'));
    });
</script>